<template>
  <div class="unit-selector" @mouseleave="handleMouseLeave" @mouseenter="boolFun">
    <div class="unit-grid" v-if="bool" ref="selector">
      <div 
        v-for="unit in units" 
        :key="unit" 
        class="unit-item"
        :class="{ active: selectedUnit === unit.unitCode }"
        @click="selectUnit(unit)"
      >
        {{ unit.unitText }}
      </div>
    </div>
    <div class="unit-btn" >
      {{  textFun(props.modelValue) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const units = ref<any>();
const bool = ref<boolean>(false);

interface Props {
  modelValue?: string;
  dataList?:any
}
//  :label="item.unitText" :value="item.unitCode" 
const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
});
const selector = ref(null)

const boolFun = ()=>{
  bool.value = true
}

const handleMouseLeave = ()=>{
  bool.value = false
}
// const handleClickOutside = () => {
//     //console.log(bool.value);
//     if (bool.value ) {
//       bool.value = false
//     }else{
//       bool.value = true
//     }
// }
// onMounted(() => {
//   document.addEventListener('click', handleClickOutside)
// })


const emit = defineEmits<{
  'update:modelValue': [value: string];
  'change': [value: string];
}>();

// 单位数据

const selectedUnit = ref(props.modelValue);
units.value = props.dataList
// 选择单位
const selectUnit = (unit: any) => {
  bool.value = false

  selectedUnit.value = unit.unitCode;
  emit('update:modelValue', unit.unitCode);
  emit('change', unit);
};

const textFun =(row:any)=>{
  for (let index = 0; index < units.value.length; index++) {
    let item = units.value[index];
    if(item.unitCode == row){
     return  item.unitText
    }
  }
}

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  selectedUnit.value = newValue;
});
</script>

<style scoped lang="scss">
.unit-selector {
  position: relative;
  width: 40px;
  height:100%;
  border: 1px solid #eee;
  background: #fff;
  text-align: center;
}
*{
  box-sizing: border-box;
}
.unit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  max-height: 200px;
  position: absolute;
  max-width: 350px;
  box-shadow: 0px 12px 32px 0px rgba(0,0,0,0.2);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #D9D9D9;
  top: 30px;
  left: 0;
  padding:10px;
  background: #ffffff;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;

}

.unit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: 84px;
  border-radius: 6px;
  font-family: Microsoft YaHei, sans-serif;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;

  &:hover {
    background: #DEF4F3;
    border-color: #DEF4F3;
    color: #000;
  }

  &.active {
    background: #DEF4F3;
    border-color: #DEF4F3;
    color: #000;
    font-weight: 500;
  }

  // // 特殊单位样式调整
  // &:nth-child(5) { // L
  //   font-weight: 500;
  // }
  
  // &:nth-child(6) { // ml
  //   background: rgba(22, 173, 164, 0.1);
  //   border-color: #16ada4;
  //   color: #16ada4;
  //   font-weight: 500;
  // }
}

// 响应式设计
@media (max-width: 480px) {
  .unit-selector {
    padding: 15px;
    max-width: 100%;
  }

  .unit-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .unit-item {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 13px;
  }
}

@media (max-width: 320px) {
  .unit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
</style>
